<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <p>{{ counter }}</p>
    <p>{{counter1}}</p>
    <p>{{ count }}</p>
    <h3>{{ name }}</h3>
    <Emits @myClick="handleMyClick"></Emits>
    <Functional level="3">使用函数组件动态实现h标签</Functional>
    <!-- 自定义指令 -->
    <p v-hightlight="'red'">自定义指令</p>
    <Emitter/>
    <Emitter1/>
  </div>
</template>

<script>
// @ is an alias to /src
import { reactive, toRefs } from '@vue/reactivity'
import { onMounted } from '@vue/runtime-core'
import { useMarket } from '../useHooks/useMarket'
import Emits from '../components/Emits.vue'
import Functional from '../components/Functioncal.jsx'
import Emitter from '../components/Emitter.vue'
import Emitter1 from '../components/Emitter1.vue'

export default {
  name: 'Home',
  components: {
    Emits,
    Functional,
    Emitter,
    Emitter1
  },
  setup(props) {
    // data相关...
    const data = useHooks()
    // counter1相关...
    const { counter1 } = useHooks1()
    // useMarkert
    const { count, name } = useMarket()
    
    // others
    const state = reactive({
      msg: 'sss'
    })
    const handleMyClick = () => {
      console.log("自定义事件Emits...")
    }

    return {
      count,
      name,
      counter1,
      ...toRefs(data),
      ...toRefs(state),
      handleMyClick,
    }
  },
}

// 自定义useHooks
function useHooks() {
  // 只要把定义的响应式数据返回即可：
  const data = reactive({
    counter: 0
  })
  
  onMounted(() => {
    let timer = null
    timer = setInterval(() => {
      data.counter++;
    }, 1000)
  })
  return data
}

function useHooks1() {
  // 只要把定义的响应式数据返回即可：
  const data = reactive({
    counter1: 1
  })
  
  onMounted(() => {
    let timer = null
    timer = setInterval(() => {
      data.counter1 *= 3;
    }, 1000)
  })
  return toRefs(data)
}
</script>
